<template>
  <app-page>
    <div class="filter">
      <div class="filter_list">
        <FilterList
          v-loading="showfilterlist"
          :filterList="filterList"
          :activefilter="activefilter"
          @editfilter="editfilter"
          @deletefilter="deletefilter"
          @openfilter="openfilter"
        />
        <div class="add_filter">
          <div class="add_filter_button" @click="openaddDialog()">新增</div>
          <div class="synchronization" @click="synchronization">同步</div>
        </div>
      </div>
      <Order v-loading="showorderlist" :orderList="orderList" :page="page" />
    </div>

    <FilterDialog v-model="showdialog" @refreshList="refreshList" :editfilterdata="editfilterdata" />
  </app-page>
</template>

<script setup>
import FilterList from './components/FilterList.vue'
import FilterDialog from './components/FilterDialog.vue'
import Order from './components/Order.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'
import { http } from '@/utils/http'
import { http as httpfz } from '@/utils/fz-http'

const showdialog = ref(false)
const filterList = ref([])
const editfilterdata = ref({})
const showfilterlist = ref(false)
const activefilter = ref({})

const showorderlist = ref(false)
const orderList = ref([])
const page = ref({
  page: 1,
  page_size: 20,
  total: 0,
})

const openaddDialog = () => {
  editfilterdata.value = {}
  showdialog.value = true
}

const refreshList = () => {
  showfilterlist.value = true
  getfilterList()
}

const getfilterList = () => {
  let body = {
    page: 1,
    page_size: 9999,
    task_status: 1,
  }

  http.post('/robot/task_list', body).then(res => {
    filterList.value = res.data.list
    showfilterlist.value = false
    console.log(res)
  })
}

const openfilter = row => {
  activefilter.value = row
  orderList.value = []
  page.value = {
    page: 1,
    page_size: 20,
    total: 0,
  }
  showorderlist.value = true
  getorderList()
}

const getorderList = () => {
  let body = {
    page: page.value.page,
    page_size: page.value.page_size,
    task_code: activefilter.value.task_code,
  }
  http
    .post('/robot/order_list_by_task', body)
    .then(res => {
      orderList.value = res.data.list
      page.value.total = res.data.total
      showorderlist.value = false
    })
    .catch(() => {
      showorderlist.value = false
    })
}

const editfilter = row => {
  editfilterdata.value = row
  showdialog.value = true
}
const deletefilter = row => {
  ElMessageBox.confirm(`是否删除筛选器 ${row.task_form.task_name}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      http.delete(`/robot/task_delete?task_code=${row.task_code}`).then(res => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        refreshList()
      })
    })
    .catch(() => {})
}

const synchronization = () => {
  http.get('/robot/all_filter_push').then(res => {
    ElMessage({
      type: 'success',
      message: res.msg,
    })
  })
}

onMounted(() => {
  showfilterlist.value = true
  getfilterList()
})
</script>

<style lang="scss" scoped>
.filter {
  display: flex;
  width: 100%;
  height: 100%;
}
.filter_list {
  width: 256px;
  height: 100%;
  border-right: 1px solid #eee;
}
.add_filter {
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add_filter_button {
  width: 200px;
  height: 32px;
  background-color: var(--pcmain-color);
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.synchronization {
  font-size: 14px;
  font-weight: bold;
  margin-left: 8px;
  cursor: pointer;
  color: #000;
}
</style>
